<!--
 * @description  : 证件-卷宗目录文件选择
 * @descriptionDetail: 证件-卷宗目录文件选择
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-09-5 15:29:13
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
      <view class="nav-right-icon">
        <text class="" @click="save">
          确定
        </text>
      </view>
    </theme-navbar>
    <!-- #endif -->
    <!-- #ifdef H5-WECHAT || H5-EMP -->
    <fab-button :content="fContent" @fabtrigger="fabtrigger" />
    <!-- #endif -->
    <view class="content u-page" v-for="(item, index) in fileList" :key="index">
      <u-checkbox :name="item.fileId" v-model="item.checked" @change="checkboxChange(item)">
        《{{ item.fileName }}》
      </u-checkbox>
      <u-icon class="iconStyle" name="eye" color="#2979ff" size="38" @tap="viewClick(item)"></u-icon>
    </view>
  </view>
</template>

<script>
	import certificateService from "@/service/certificate/certificate.service.js";
	import fabButton from '@/components/uni-fab.vue';

	export default {
		components: {
			fabButton
		},
		data() {
			return {
				preParams: {}, // 上个页面传过来的参数
				fileList: [],
				selectIds: [],
				selectItems: [],
				isSingle: true,
				bizUuid: '',
				fContent: [{
					iconPath: require('@/static/confirm.png'),
					selectedIconPath: require('@/static/confirm.png'),
					text: '确定',
					active: false,
				}],
			}
		},
		onLoad() {
			this.preParams = this.getRouteParam();
			this.initData();
		},
		mounted() {
			this.setRightBtns();
		},
		methods: {
			setRightBtns() {
				let self = this;
				// #ifdef H5-DINGDING
				this.$deviceApi.setRight("确定", () => {
					self.save();
					this.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.save();
				}
			},
			// 调用后台接口查询数据
			initData() {
				certificateService.getDirMaterial(this.preParams).then(res => {
					if (res.success) {
						res.data.forEach(item => {
							item.checked = this.selectIds.includes(item.fileId);
						})
						this.fileList = res.data;
					} else {
						this.$u.toast(res.msg);
					}
				})
			},
			// 添加检测信息
			save() {
				if (this.selectItems.length == 0) {
					this.$api.toast('请选择');
					return;
				}
				this.backPrev({
					paramKey: "backMaterial",
					param: this.selectItems,
				});
			},
			checkboxChange(item) {
				let len = -1;
				for (let i = 0; i < this.selectIds.length; i++) {
					if (this.selectIds[i] == item.fileId) {
						len = i;
						break;
					}
				}
				if (len == -1) {
					this.selectIds.push(item.fileId);
					this.selectItems.push(item);
				} else {
					this.selectIds.splice(len, 1);
					this.selectItems.splice(len, 1);
				}
				this.fileList.forEach(itm => {
					itm.checked = this.selectIds.includes(itm.fileId);
				});
			},
			// 材料预览
			viewClick(item) {
				if (!item.fileId) {
					this.$u.toast("没有文书");
					return;
				}
				this.setRouteParam({
					fileId: item.fileId,
				});
				this.$u.route('pages/commonPage/printerComponent');
			},
		},
	}
</script>

<style lang="scss" scoped>
	.p_content {
		width: 100%;
		padding: 20rpx 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid $u-border-color;
	}

	.nav-right-icon {
		margin-right: 20rpx;
		color: white;
	}

	/deep/.uicon-eye {
		top: 4rpx !important;
		left: 20rpx;
	}
</style>
